<template>
  <div class="addExpense">
    <el-form ref="form" :model="form" :rules="roleCodeRule" label-width="120px">
      <el-row>
        <mainTilte title="模板基础信息" />
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="模板名称">
            <el-input v-model.trim="form.name" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="店铺">
            <el-input v-model.trim="form.shop_name" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="开始时间">
            <el-input :value="form.start_time | formatDate" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="结束时间">
            <el-input :value="form.end_time | formatDate" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="备注">
            <el-input v-model="form.remarks" type="textarea" autosize disabled />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <mainTilte title="商品明细信息" />
      </el-row>
      <el-row>
        <egrid
          v-loading="loading"
          class="egrid"
          stripe
          fit
          border
          highlight-current-row
          element-loading-text="正在努力加载中..."
          :data="form.list"
          :columns="columns"
          :columns-schema="columnsSchema"
          :columns-handler="columnsHandler"
          @selection-change="checkIds"
        />
      </el-row>
    </el-form>
  </div>
</template>

<script>
import list from '@/layout/mixin/list'
import thund from '@/components/base/thund'
import dicValues from '@/components/dicTransform/index'
export default {
  mixins: [list],
  props: {
    form: {
      type: Object,
      default() {
        return {}
      }
    }
  },

  data() {
    // 包装方式 ：1-普通商品 2-多箱包装
    const packMethodList = [
      {
        code: 1,
        name: '普通商品'
      },
      {
        code: 2,
        name: '多箱包装'
      }
    ]
    return {
      // form: {
      //   value: "",
      // },
      roleCodeRule: {},
      columns: [
        {
          label: '促销基准价',
          prop: 'sales_price',
          width: '200',
          align: 'center',
          tooltip: false
        },
        {
          label: '缩略图',
          prop: 'image_url',
          width: '200',
          align: 'center',
          tooltip: false
        },
        {
          label: '系统sku',
          prop: 'code',
          align: 'center',
          tooltip: false
        },
        {
          label: '中文名称',
          prop: 'name_ch',
          width: '200',
          align: 'center',
          tooltip: false
        },
        {
          label: '英文名称',
          prop: 'name_en',
          align: 'center',
          tooltip: false
        },
        {
          label: '包装类型',
          prop: 'packing_method',
          width: '200',
          align: 'center',
          tooltip: false
        },
        {
          label: '商品分类',
          prop: 'category_text',
          width: '200',
          align: 'center',
          tooltip: false
        }

      ],
      columnsSchema: {
        包装类型: {
          propsHandler({ col, row }) {
            return {
              dictionaries: packMethodList,
              code: row[col.prop]
            }
          },
          component: dicValues
        },
        缩略图: {
          propsHandler({ col, row }) {
            return {
              img: row.image_url
            }
          },
          component: thund
        }
      }
    }
  },
  methods: {
    columnsHandler() {}
  }
}
</script>

<style>
</style>
